<div class="banner-player index-width-hack">
  <div id="carousel-banner-generic" class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicators">
      <% (0..@banners.count - 1).each do |i| %>
        <%= carousel_for(i) %>
      <% end %>
    </ol>

    <div class="carousel-inner">
      <% @banners.each_with_index do |banner, index| %>
        <%= carousel_item_for index do %>
          <a href="">
            <%= image_tag banner.img.url %>
          </a>
        <% end %>
      <% end %>
    </div>
  </div>
</div>



<div class="container index-width-hack">
  <div class="content cc">
    <h1 class="index-h1"><%= t('home.what_can_we_do') %> WHAT CAN WE DO？</h1>

    <div class="our-item">
      <i class="icon-product"></i>
      <h2><%= t('home.our_product') %></h2>
      <p><%= t('home.our_product_descrip')%></p>
      <%= link_to t('home.btn_more'), products_path, class: 'btn-more' %>
    </div>
    <div class="our-item">
      <i class="icon-service"></i>
      <h2><%= t('home.our_service')%></h2>
      <p><%= t('home.our_service_descrip')%></p>
      <%= link_to t('home.btn_more'), '/introduces/show/service', class: 'btn-more' %>
    </div>
    <div class="our-item">
      <i class="icon-client"></i>
      <h2><%= t('home.our_customer')%></h2>
      <p><%= t('home.our_customer_descrip')%></p>
      <%= link_to t('home.btn_more'), '/introduces/show/customer', class: 'btn-more' %>
    </div>

  </div>

  <div class="expert-help">
    <div class="content">
      <h2><%= t('home.expert')%></h2>
      <p><%= t('home.expert_descrip')%></p>
      <%= link_to t('home.btn_more'), '', class: 'btn-more' %>
      <i class="icon-pc"></i>
    </div>
  </div>

  <div class="content cc">
    <div class="our-item our-item-large">
      <i class="icon-coffee"></i>
      <h2><%= t('home.learn_about_our')%></h2>
      <p><%= t('home.learn_about_descrip')%></p>
      <%= link_to t('home.btn_more'), description_about_path, class: 'btn-more' %>
    </div>
    <div class="our-item our-item-large">
      <i class="icon-card"></i>
      <h2><%= t('home.join_us')%></h2>
      <p><%= t('home.join_us_descrip')%></p>
      <%= link_to t('home.btn_more'), job_about_path, class: 'btn-more' %>
    </div>
  </div>
</div>

<div class="article-player index-width-hack">
  <div class="content">
    <div  class="carousel slide" data-ride="carousel" id="carousel-news-generic">
      <div class="title"></div>
      <ol class="carousel-indicators hide">
        <% @posts.each_with_index do |post, index| %>
        <li data-target="#carousel-news-generic" data-slide-to="<%=index%>" <%if index == 0%>class="active" <%end%>></li>
        <% end %>
      </ol>

      <div class="carousel-inner">
        <% @posts.each_with_index do |post, index| %>
          <%= post_carousel_item_for index do %>
            <%= link_to image_tag(post.front_img.url), @post, class: 'cover' %>
            <div class="detail">
              <h1><%= link_to "#{format_datetime(post.created_at, '%Y/%m/%d')} #{post.title}", post%></h1>
              <p><%= raw post.content.truncate(100) %></p>
            </div>
          <% end %>
        <% end %>
      </div>

      <a class="left carousel-control" href="#carousel-news-generic" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left"></span>
      </a>
      <a class="right carousel-control" href="#carousel-news-generic" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right"></span>
      </a>
    </div>
  </div>
</div>
